<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise对象</title>
</head>
<body>
<!--
  1. 理解:
    * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
    * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
    * ES6的Promise是一个构造函数, 用来生成promise实例
  2. 使用promise基本步骤(2步):
    * 创建promise对象
      let promise = new Promise((resolve, reject) => {
          //初始化promise状态为 pending
        //执行异步操作
        if(异步操作成功) {
          resolve(value);//修改promise的状态为fullfilled
        } else {
          reject(errMsg);//修改promise的状态为rejected
        }
      })
    * 调用promise的then()
      promise.then(function(
        result => console.log(result),
        errorMsg => alert(errorMsg)
      ))
  3. promise对象的3个状态
    * pending: 初始化状态
    * fullfilled: 成功状态
    * rejected: 失败状态
  4. 应用:
    * 使用promise实现超时处理

    * 使用promise封装处理ajax请求
      let request = new XMLHttpRequest();
      request.onreadystatechange = function () {
      }
      request.responseType = 'json';
      request.open("GET", url);
      request.send();
-->
<script type="text/javascript">
  //创建一个promise实例对象
  let promise = new Promise((resolve, reject) => {
    //初始化promise的状态为pending---->初始化状态
    console.log('初始化状态') //同步执行
    //启动异步任务
    setTimeout(() => {
      console.log('执行异步任务')
      //resolve('异步任务获取的数据') //修改promise的状态pending---->fullfilled（成功状态）
      reject('执行失败返回的数据')//修改promise的状态pending----->rejected(失败状态)
    }, 1000)
  })
  promise.then((data) => {
    console.log(`成功了，${data}`)
  }, (error) => {
    console.log(`失败了，${error}`)
  })
  console.log('---------');

  //定义一个请求news的方法
  function getNews(url) {
    //创建一个promise对象
    let promise = new Promise((resolve, reject) => {
      //初始化promise状态为pending
      //启动异步任务
      let request = new XMLHttpRequest()
      request.onreadystatechange = () => {
        if (request.readyState === 4) {
          if (request.status === 200) {
            let news = request.response
            resolve(news)
          } else {
            reject('请求失败了...')
          }
        }
        request.responseType = 'json' //设置返回的数据类型
        request.open('GET', url) //规定请求的方法，创建链接
        request.send() //发送
      }
    })
    return promise
  }

  getNews('http://localhost:3000/news?id=2')
    .then((news) => {
      console.log(news)
      document.write(JSON.stringify(news))
      console.log('http://localhost:3000' + news.commentsUrl);
      return getNews('http://localhost:3000' + news.commentsUrl)
    }, (error) => {
      alert(error)
    })
    .then((comments) => {
      console.log(comments)
      document.write('<br><br>' + comments)
    }, (error) => {
      alert(error)
    })


</script>
</body>
</html>